<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- v-show 原理是给标签添加display:none -->
    <h1 v-show="flag">hello world</h1>
    <button @click="show">显示</button>

    <!-- v-if v-else-if v-else, v-if 可以做显示隐藏，显示创建标签，隐藏删除标签 -->
    <h1 v-if="num<60">不合格</h1>
    <h1 v-else-if="num>=60&&num<90">不合格</h1>
    <h1 v-else>优秀</h1>

    v-show 和 v-if 做显示隐藏的区别
    从性能方面：如果要频繁做显示隐藏，推荐使用 v-show , 如果只显示一次就不在改变效果的显示隐藏，性能消耗小

    <!-- v-for中数组有2项参数，对象有3项参数 -->
    <h1 v-for="(item,index) in arr">{{item}}--{{index}}</h1>
    <h1 v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</h1>

  </div>
  <script src="../vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false,
        num: 95,
        val: '',
        arr: [1, 2, 3],
        obj: { id: 0, name: 'lili' },
      },
      methods: {
        show() {
          this.flag = !this.flag
        },

      }


    })
  </script>
</body>

</html>